<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title></title>
		<link rel="stylesheet" href="">
		<script src="js/jquery.min.js"></script>
		<style>
			table{
				border-collapse: collapse;
				/*边框合并，把相邻边框合并一条 */
				margin-top: 40px;
				text-align: center;
				line-height: 30px;
				font-size: 14px;
			}
			td{
				border: 1px solid #000;
			}
			.head{
				background: skyblue;
			}

		</style>
	</head>
	<body>
		<input type="text" placeholder="请输入商品名字" >
		<button class="add">新增</button><br><br>
		<input type="text" placeholder="请输入查询名字">
		<button>查询</button>
		<table>
			<thead>
				<tr class="head">
					<td width="100px">商品id</td>
					<td width="200px">商品名字</td>
					<td width="300px">创建日期</td>
					<td width="100px">操作</td>
				</tr>
			</thead>
			<tbody></tbody>
			
		</table>

		<script>
			function add(data){
				$('tbody').html('')

				for(var i=0;i<data.length;i++){
					// 追加标签
					$('tbody').append(`<tr >
				<td width="100px">${data[i].id}</td>
				<td width="200px">${data[i].name}</td>
				<td width="300px">${data[i].time}</td>
				<td width="100px" onclick="del(this)">操作</td>
			</tr>`)
				}
			}


			// 新增数据
			$('.add').click(function(event) {
				if($('input').eq(0).val()==''){
					alert('请输入商品')
				}else{
					$.ajax({
						url:'http://127.0.0.1:8989/addList',
						method:'post',
						data:{
							proName:$('input').eq(0).val()
						},
						dataType:'json',
						success:function(res){
							// res代表相应内容
							console.log(res);
							add(res.a)
						}
					})
				}
			});

			// 页面加载的时候请求数据
			$.ajax({
				url:'http://127.0.0.1:8989/getList',
				method:'get',
				// 接收数据类型，可以强制转化
				dataType:'json',
				success:function(res){
					// res代表相应内容
					console.log(res.a);
					add(res.a)
				}
			})

			// 删除数据
			function del(a){
				$.ajax({
					url:'http://127.0.0.1:8989/delList',
					method:'get',
					data:{
						id:$(a).siblings('td').eq(0).html()
					},
					dataType:'json',
					success:function(res){
						add(res.a)
					}	
				})
			}

			var stu={name:'zhangsan'};
			var stu1=JSON.stringify(stu)
			console.log(stu1);
			var stu2=JSON.stringify(stu1)
			console.log(stu2);
			var stu3=JSON.parse(stu2);
			var stu4=JSON.parse(stu3);

			var stu5=JSON.stringify(stu2)
	
			console.log(stu5);

			console.log(stu.toString())

			console.log({name:'zhangsan'}.toString())

		</script>
	</body>
</html>